<template>
  <div class="moreSelete">
    <el-input :placeholder="valueLists.length?`${checkedLists}`:'请输入内容'" v-model="inputVal" @input="filterVal">
      <el-popover slot="append" v-model="visible" placement="bottom-end" width="200" trigger="click" >
        <el-checkbox v-model="checkAll" @change="handleCheckAll">全选 (已选{{ valueLists.length }} / {{ Object.keys(paychnList).length }})</el-checkbox>
        <div style="max-height: 300px;display: inline;overflow: scroll" class="moreSeletePup">
          <el-checkbox-group v-model="valueLists" @change="CheckChange">
            <el-checkbox v-for="(item,key) in MoreList" :label="key" :key="key">{{ item }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <el-button slot="reference"><i class="el-icon-arrow-down"/>请选择</el-button>
      </el-popover>
    </el-input>
  </div>
</template>

<script>
  import { getPayChn } from '@/api/table'
  export default {
    // props: {
    //   paychnList: {
    //     type: Object
    //   }
    // },
    data() {
      return {
        inputVal: '',
        visible: false,
        checkAll: false,
        paychnList: [],
        checkedLists: [],
        valueLists: [],
      }
    },
    computed: {
      MoreList() {
        const List = {}
        Object.keys(this.paychnList).map(item => {
          if (this.paychnList[item].includes(this.inputVal)) {
            List[item]= this.paychnList[item]
          }
        })
        return List
      }
    },
    watch: {
      visible() {
        if (!this.visible) {
          this.inputVal = ''
        }
      }
    },
    created() {
      this.getSelect()
    },
    methods: {
      getSelect() {
        getPayChn({}).then(res => {
          this.paychnList = res.data.pay_type_list
        })
      },
      handleCheckAll(val) {
        this.valueLists = val ? [...new Set([...this.valueLists, ...Object.keys(this.MoreList)])] : []
        this.$emit('input', this.valueLists)
        this.checkedLists = []
        this.valueLists.map(item => {
          this.checkedLists.push(this.paychnList[item])
        })
      },
      CheckChange() {
        // this.$emit('input', this.checkedLists)
        this.$emit('input', this.valueLists)
        this.checkedLists = []
        this.valueLists.map(item => {
          this.checkedLists.push(this.paychnList[item])
        })
      },
      filterVal() {
        this.visible = true
      }
    }
  }
</script>

<style lang="scss">
  .el-popover {
    line-height: 1.4;
    .moreSeletePup {
      .el-checkbox-group {
        label.el-checkbox {
          margin-left: 0;
          margin-right: 0;
          width: 100%;
          line-height: 24px;
        }
      }
    }
  }
</style>
